<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <meta name="page-view-size" content="1280*720" />
    <link rel="stylesheet" href="style/base.css" />
    <title>首页</title>
    <style>
      body {
        position: absolute;
        margin: 0;
        padding: 0;
        width: 1280px;
        height: 720px;
        background-image: url(images/bg.png);
        background-repeat: no-repeat;
        background-color: transparent;
      }
      #btn {
        position: absolute;
        right: 50px;
        top: 25px;
        color: #fff;
        font-size: 18px;
      }
      

      #btn .btn {
        position: absolute;
        width: 135px;
        line-height: 50px;
        right: 0;
        text-align: center;
        border-radius: 10px;
        overflow: hidden;
      }

      #btn .btn-0 {
        right: 155px;
        background-color: #36b3ff;
      }

      #btn .btn-1 {
        background-color: #ffa34f;
      }

      #recommend {
        padding: 20px 50px 15px;
      }
      #recommend .item {
        float: left;
        overflow: hidden;
      }
      #recommend #recommend-0 {
        width: 495px;
        height: 270px;
        margin-left: 0;
      }

      #recommend-1,
      #recommend-2,
      #recommend-3 {
        width: 197px;
        height: 270px;
        margin-left: 30px;
      }
      #recommend-4,
      #recommend-5,
      #recommend-6,
      #recommend-7 {
        margin: 30px 30px 0 0;
        width: 272px;
        height: 142px;
      }
      #recommend-7 {
        margin-right: 0;
      }
      #classify {
        padding-bottom: 30px;
      }
      #classify .item {
        float: left;
        width: 176px;
        height: 120px;
        margin-right: 24px;
      }
      #more-scroll .title img {
        height: 36px;
        width: auto;
        margin-left: 50px;
      }
      .more-scroll .item {
        float: left;
        margin-right: 30px;
      }
      .more-container {
        padding: 15px 0 15px 30px;
      }
      .more-container .item{
        float: lef;
      }

    </style>
  </head>
  <body onload="init()">
  <!--联通不要 -->
    <div class='smallResolution' id="smallResolution"></div>
	<!--联通不要 -->
    <div id="btn"></div>
    <div id="marquee"></div>
    <div id="more-container">
      <div id="more-scroll">
        <div id="recommend" class="oh"></div>
        <div id="classify" class="oh"></div>
      </div>
    </div>
  </body>

  <script src="js/jquery.js"></script>
  <script src="api/index.js"></script>
  <script src="js/utlis.js"></script>
  <script src="js/KeyEnter.js"></script>
  <script src="js/event.js"></script>
  <script src="js/page.js"></script>

  <script src="components/logo.js"></script>
  <script src="components/marquee.js"></script>
  <script src="components/homeBtn.js"></script>
  <script src="components/recommend.js"></script>
  <script src="components/classify.js"></script>
  <script src="components/more.js"></script>
  <script>
    function init() {
      logo.init();
      marquee.init();
      homeBtn.init();
      recommend.init();
      classify.init();
      more.init();
      page.init({
        areas: [
          "btn", 
          "recommend", 
          "classify", 
          "more-0", 
          'more-1',
          'more-2',
          'more-3',
          'more-4',
          'more-5',
          'more-6',
          'more-7',
        ],
      });
      // onFocus()
    }

    function keyUp() {
      switch (page.area[0]) {
        case 1:
          recommend.keyUp(page.area[1]);
          break;
        case 2:
          classify.keyUp(page.area[1])
          break;
      }
    }

    function keyDown() {
      switch (page.area[0]) {
        case 0:
          homeBtn.keyDown(page.area[1]);
          break;
        case 1:
          recommend.keyDown(page.area[1]);
          break;
        case 2:
          classify.keyDown(page.area[1])
          break;
      }
    }

    function keyRight() {
      switch (page.area[0]) {
        case 0:
          homeBtn.keyRight(page.area[1]);
          break;
        case 1:
          recommend.keyRight(page.area[1]);
          break;
        case 2:
          classify.keyRight(page.area[1])
          break;
      }
    }

    function keyLeft() {
      switch (page.area[0]) {
        case 0:
          homeBtn.keyLeft(page.area[1]);
          break;
        case 1:
          recommend.keyLeft(page.area[1]);
          break;
        case 2:
          classify.keyLeft(page.area[1])
          break;
      }
    }

    function keyEnter() {
      console.log(12);
    }

  </script>
</html>
